<template>
  <div>
    <el-dialog
      v-model="props.dialogVisible"
      width="20rem"
      top="25vh"
      :title="props.title"
    >
      <el-descriptions :column="1" direction="vertical">
        <el-descriptions-item label="状态码">
          <el-alert :closable="false">
            <div class="w-full flex items-center">
              <el-icon :size="20" color="#ff7d00"
                ><WarnTriangleFilled
              /></el-icon>
              <span class="font-semibold ml-1">
                {{ props.code }}
              </span>
            </div>
          </el-alert>
        </el-descriptions-item>
        <el-descriptions-item label="错误类型">
          <el-alert :closable="false">
            <div class="w-full flex items-center">
              <el-icon :size="20" color="#ff7d00"
                ><WarnTriangleFilled
              /></el-icon>
              <span class="font-semibold ml-1 text-[red]">
                {{ props.type }}
              </span>
            </div>
          </el-alert>
        </el-descriptions-item>
        <el-descriptions-item label="具体错误">
          <el-alert :closable="false">
            <div class="w-full flex">
              <el-icon :size="20" color="#165dff"><Opportunity /></el-icon>
              <span>
                {{ props.content }}
              </span>
            </div>
          </el-alert>
        </el-descriptions-item>
      </el-descriptions>

      <template #footer>
        <div class="w-full flex justify-end">
          <el-button @click="handleClose">关闭</el-button>
          <!-- <el-button type="primary">知道了</el-button> -->
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

onMounted(() => {});

const emit = defineEmits(["handleClose"]);

const props = defineProps({
  dialogVisible: {
    // 对话框是否可见
    type: Boolean,
    default: false,
  },

  title: {
    // 标题
    type: String,
    default: "错误提示",
  }, // 标题
  code: {
    // 错误类型
    type: String,
    default: "404",
  },
  type: {
    // 错误类型
    type: String,
    default: "检测到接口错误",
  },
  content: {
    // 具体错误提示
    type: String,
    default: "请检查请求URL是否正确，或者联系后端开发人员确认接口状标。",
  },
});

const handleClose = () => {
  emit("update:dialogVisible", false);
};
</script>

<style scoped lang="scss">
.dialog {
  :deep(.el-card__header),
  :deep(.el-card__footer) {
    @apply py-[0.5rem];
  }
}
</style>